<template>
  <el-container class="full-container">
    <el-aside width="220px" class="aside-left">
      <div class="aside-header">数据源</div>
      <ul class="aside-left-ul">
        <li
          v-for="(item, index) in shortEquipment"
          :key="item.id"
          :class="{'active':equipmentModel.id===item.id}"
          @click="equipmentClick(item, index)"
        >
          <el-tooltip :content="transStatus(item.status)" placement="top">
            <b :class="'status'+ item.status"></b>
          </el-tooltip>
          <span :title="item.id+'-'+item.name">{{ item.portName }}-{{ item.name }}</span>
        </li>
      </ul>
    </el-aside>
    <el-container>
      <el-main v-loading="isSubmitLoading">
        <data-element :equipment="equipmentModel"></data-element>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import { getAllEquipmentShort } from "@/api/equipment";
  import DataElement from "./components/DataElement";

  export default {
    components: {
      'data-element': DataElement
    },
    data() {
      return {
        shortEquipment: [],
        equipmentModel: {},
        isSubmitLoading: false
      };
    },
    computed: {},
    created() {
      this.getAllEquipmentShort();
    },
    methods: {
      // 获取通道信息
      getAllEquipmentShort() {
        getAllEquipmentShort().then(result => {
          if (result.length) {
            this.shortEquipment = result;
            // 查询第一个数据源信息
            // this.equipmentModel = result[0]
          }
        });
      },
      equipmentClick(item) {
        this.equipmentModel = item
      },
      transStatus(status) {
        let returnVal = '';
        switch (status) {
          case 2:
            returnVal = 'MODBUS读取发生IO错误';
            break;
          case 3:
            returnVal = 'MODBUS读取发生数值错误';
            break;
          case 4:
            returnVal = 'MODBUS读取发生协议错误';
            break;
          case 5:
            returnVal = '正常';
            break;
          case 6:
            returnVal = '故障，到达最大重试次数';
            break;
          default:
            returnVal = 'unknown，未知状态';
        }
        return returnVal;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .full-container {
    min-height: calc(100vh - 50px);
  }

  .aside-left {
    margin-bottom: 0;
  }

  .aside-header {
    display: flex;
    align-items: center;
    font-weight: bold;

    &:before {
      content: '';
      display: inline-block;
      margin-right: 5px;
      width: 4px;
      height: 16px;
      background-color: #000000;
    }
  }

  .aside-left-ul {
    margin: 0;
    list-style: none;
    padding-left: 0;

    li {
      position: relative;
      display: flex;
      align-items: center;
      line-height: 40px;
      cursor: pointer;
      border-bottom: 1px dashed #ccc;

      b {
        display: inline-block;
        margin-right: 10px;
        content: '';
        width: 10px;
        height: 10px;
        border: 1px solid #909399;
        background-color: #909399;
        &.status2 {
          border-color: #E6A23C;
          background-color: #E6A23C;
        }
        &.status3 {
          border-color: #F56C6C;
          background-color: #F56C6C;
        }
        &.status4 {
          border-color: #F00;
          background-color: #F00;
        }
        &.status5 {
          border-color: #67C23A;
          background-color: #67C23A;
        }
      }

      &:after {
        position: absolute;
        top: 12px;
        z-index: 1;
        right: 0;
        content: "\E6E0";
        font-family: 'element-icons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      &.active {
        color: #1890ff;
        border-color: #1890ff;
        border-bottom-style: solid;

        &:before {
          background-color: #1890ff;
          border-color: #1890ff;
        }
      }
      & > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>
